<template>
	<div class="train trainOccupyingSeat">
		<trainHeader name="占座中" btn="取消订单" @btnClick="cancel"></trainHeader>
		<div class="trainOccupyingSeat_tip">
			<img src="http://h5.kpcx179.com/wximages/train/shibai@2x.png" alt="" />
			<span>铁路系统繁忙，请手动刷新占座结果后付款</span>
		</div>
		<!--车次详情-->
		<trainlistdetails :msg="message" :departureDate="message.departureDate" v-if="message"></trainlistdetails>
		<!--乘客-->
		<div class="trainOccupyingSeat_passengers" v-if="message">
			<div v-for="item in message.passengers" class="trainOccupyingSeat_passenger">
				<div>
					<div class="trainOccupyingSeat_name">
						<span>{{item.passengerName}}</span>
						<em v-if="item.passengerType == 2" class="child">儿童票</em>
						<em v-if="item.passengerType == 3">学生票</em>
					</div>
					<div class="color">￥{{item.ticketPrice}}</div>
				</div>
				<div class="trainOccupyingSeat_seatClassName">
					<span>{{item.seatClassName}}</span>
					<span>{{item.seatNo}}</span>
				</div>
				<div class="color font">
					排队中
				</div>
				<div class="trainOccupyingSeat_circle left"></div>
				<div class="trainOccupyingSeat_circle right"></div>
			</div>
		</div>
		<!--按钮-->
		<div class="trainOccupyingSeat_btn">
			<div @click="refresh">
				订单刷新
			</div>
		</div>
		<!--弹窗-->
		<trainCancelMask v-if="maskFlag" @mask='maskClick' @cancel="cancelOrder" :promptMessage="promptMessage"></trainCancelMask>
	</div>
</template>
<style scoped>
	.trainOccupyingSeat {
		padding-bottom: 150px;	
	}
	
	.trainOccupyingSeat_tip {
		width: 100%;
		height: 70px;
		background: #FAE2DA;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 30px;
		box-sizing: border-box;
		font-size: 28px;
		color: #fb6523;
	}
	
	.trainOccupyingSeat_tip>img {
		width: 40px;
		height: 40px;
		margin-right: 16px;
	}
	
	.trainOccupyingSeat_passengers {
		padding: 0 16px;
	}
	
	.trainOccupyingSeat_passenger {
		background: #fff;
		height: 220px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 0 30px;
		position: relative;
		top: 0;
		left: 0;
		border-radius: 10px;
		border-bottom: 2px dashed #b7b7b7;
	}
	
	.trainOccupyingSeat_passenger:last-child{
		border:0;
	}
	
	.trainOccupyingSeat_passenger>div {
		display: flex;
		justify-content: space-between;
		font-size: 32px;
		color: #333;
	}
	
	.trainOccupyingSeat_passenger>.trainOccupyingSeat_seatClassName {
		justify-content: flex-start;
		font-size: 28px;
	}
	
	.trainOccupyingSeat_passenger>.trainOccupyingSeat_seatClassName>span {
		margin-right: 15px;
	}
	
	.trainOccupyingSeat_passenger .color {
		font-size: 30px;
		color: #fb6523;
	}
	
	.trainOccupyingSeat_passenger .color.font {
		font-size: 28px;
	}
	
	.trainOccupyingSeat_circle {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: #F4F5F9;
		position: absolute;
		top: -13px;
	}
	
	.trainOccupyingSeat_circle.left {
		left: -13px;
	}
	
	.trainOccupyingSeat_circle.right {
		right: -13px;
	}
	
	.trainOccupyingSeat_btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 18px 30px;
		box-sizing: border-box;
		background-color: #F4F5F9;
	}
	
	.trainOccupyingSeat_btn>div {
		height: 98px;
		background: #fff;
		border-radius: 49px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36px;
		color: #3bc3c2;
	}
	
	.trainOccupyingSeat_name {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.trainOccupyingSeat_name>em {
		font-size: 24px;
		color: #fb6523;
		width: 94px;
		height: 36px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #ffc2a7;
		font-weight: 700;
		margin-left: 20px;
	}
	
	.trainOccupyingSeat_name>em.child {
		color: #ffffff;
		background-color: #f7c413;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	import trainlistdetails from "../../../components/trainListDetails"; //详情
	import trainCancelMask from "../../../components/trainCancelMask"; //弹窗 //层级350
	export default {
		name: "trainOccupyingSeat",
		data() { //数据
			return {
				orderNum: "", //订单号
				message: null, //订单信息
				eventFlag:true,//刷新防连击
				maskFlag:false,//蒙层
				isChangTicket:false,//是否改签
				promptMessage:"",//提示信息
			}
		},
		mounted() {
			(this.$route.query.orderNum) && (this.orderNum = this.$route.query.orderNum); //订单号
			this.getOrder(1); //获取订单详情
		},
		created() {
			
		},
		methods: {
			getOrder(flag) { //获取订单详情 1 进入 0 刷新
				flag || (this.eventFlag = false);
				var param = {
					orderNum: this.orderNum,
					orderType: "3"
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/localOrderDetail", param).then((res) => {
					this.$loading.hide();
//					console.log(res.data)
					if(res.data.Code == "0") {
						var message = res.data.Result.trainOrderDetailInfo;
						if(flag) {//进入页面
							this.isChangTicket = Boolean(message.changedType);//改签判断
							var str = this.isChangTicket ? "改签" : "";
							this.promptMessage = "一天内3次取消" + str + "订单后，当日将不能在12306继续购票！";
							this.getTraiMessage(message); //单车次查询
						} else { //刷新
							this.eventFlag = true;
							if(message.orderStateCode == 'S' || message.orderStateCode == 'F') { //占座成功或者待支付
								this.$router.push({//跳转
									name:"trainPay",
									query: {
										orderNum:message.outOrderNo,
										changedType:message.changedType,//是否改签
										orderType:message.order_type,//订单类型
									},
								});
							} else if(message.orderStateCode == "B") {
								this.$toast("占座失败", {//占座失败
									durtaion: 200,
									location: 'center',
								});
								var timer = setTimeout(function(){
									clearTimeout(timer);
									this.$router.go(-1);
								}.bind(this),1500);
							} else {}
						};
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
						var timer = setTimeout(function(){
							clearTimeout(timer);
							this.$router.go(-1);
						}.bind(this),2000);
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			getTraiMessage(message) { //单车次查询
				var param = {
					trainNo: message.trainNo,
					trainDate: message.trainDate.split(" ")[0].replace(/-/g, ''),
				};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/trainNo", param).then((res) => {
					this.$loading.hide();
					if(res.data.Code == "0") {
						message.fromPassType = (res.data.Result.fromStation == message.fromStation) ? 0 : 1; //始发站
						message.toPassType = (res.data.Result.toStation == message.toStation) ? 0 : 1; //终点站	
						this.message = message;
						this.getDepartureDate(); //处理组件所需时间数据
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
						var timer = setTimeout(function(){
							clearTimeout(timer);
							this.$router.go(-1);
						}.bind(this),2000);
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			getDepartureDate() { //处理时间信息 搭建组件所需数据
				this.message.startDate = this.$publicMethod.getWeek(this.message.departureTime);
				this.message.endDate = this.$publicMethod.getWeek(this.message.arrivalTime);
				this.message.fromTime = this.message.startDate.time;
				this.message.toTime = this.message.endDate.time;
				this.message.departureDate = this.message.trainDate;
				var runTimeSpan = new Date(this.message.arrivalTime.replace(/-/g,"/")).getTime() - new Date(this.message.departureTime.replace(/-/g,"/")).getTime();
				this.message.runTimeSpan = runTimeSpan / (1000 *60);
			},
			cancel() { //弹窗
				this.maskFlag = true;
			},
			refresh() { //刷新
				this.eventFlag && this.getOrder(0);
			},
			maskClick(){//蒙层点击
				this.maskFlag = false;
			},
			cancelOrder(){ //取消订单
				this.maskFlag = false;
				var url = "tctrain/train/cancelMyOrders";
				var param = {
					orderNo: this.message.orderNo,
			        orderNum: this.message.order_num,
			        orderType: String(this.message.order_type),
				};
				this.isChangTicket && (param.method = "cancelChangeTicket");//改签添加参数
				this.isChangTicket && (url = "tctrain/train/cancelChangeTicket");//改签修改接口地址
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + url, param).then((res) => {
					this.$loading.hide();
					this.$toast("取消成功", {
						durtaion: 200,
						location: 'center',
					});
					var timer = setTimeout(function(){
						clearTimeout(timer);
						this.$router.go(-3);
					}.bind(this),1000);
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			}
		},
		components: {
			trainHeader,
			trainlistdetails,
			trainCancelMask
		},
	};
</script>